<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 条件 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" :model="queryParams" ref="queryFormRef">
          <a-row :gutter="16">
            <a-col :sm="24" :md="12" :lg="8" :xl="6" >
              <a-form-model-item label="岗位名称" prop="postName">
                <a-input v-model="queryParams.postName" placeholder="请输入岗位名称" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" >
              <a-form-model-item label="岗位编码" prop="postKey">
                <a-input v-model="queryParams.postKey" placeholder="请输入岗位编码" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" >
              <a-form-model-item label="是否启用" prop="isEnable" allow-clear>
                <a-select v-model="queryParams.isEnable" placeholder="请选择是否启用" allow-clear>
                  <a-select-option value="1">启用</a-select-option>
                  <a-select-option value="2">禁用</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="备注" prop="remark">
                <a-input v-model="queryParams.remark" placeholder="请输入备注" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6">
              <span class="table-page-search-submitButtons">
                <a-space>
                  <a-button type="primary" @click="handleQuery"><a-icon type="search"/>查询</a-button>
                  <a-button @click="handleReset"><a-icon type="redo"/>重置</a-button>
                  <a @click="advanced = !advanced">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'"/>
                  </a>
                </a-space>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- 按钮 -->
      <div class="table-operations">
        <a-button type="primary" icon="plus" @click="$refs.createForm.handleAdd()" v-has-permi="['system:sysPost:save']">新增</a-button>
        <a-button type="primary" icon="menu-unfold" @click="$refs.importForm.handleImport()" v-has-permi="['system:sysPost:import']">导入</a-button>
        <a-button type="primary" icon="download" @click="handleExport" v-has-permi="['system:sysPost:export']">导出</a-button>
        <a-button type="danger" icon="delete" :disabled="multiple" @click="handleRemoveBatch" v-has-permi="['system:sysPost:removeBatch']">批量删除</a-button>
        <table-setting
          :style="{float: 'right'}"
          :table-size.sync="tableSize"
          v-model="columns"
          :refresh-loading="loading"
          @refresh="getList"/>
      </div>
      <!-- 表格 -->
      <a-table
        :loading="loading"
        :size="tableSize"
        rowKey="id"
        :columns="columns"
        :data-source="sysPostList"
        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: handleSelectRow}"
        :pagination="false"
        :bordered="tableBordered">
        <template v-slot:isEnable="value, row">
          <a-tag v-if="row.isEnable == 1" color="green">启用</a-tag>
          <a-tag v-else color="red">禁用</a-tag>
        </template>
        <template v-slot:operation="value, row">
          <a @click="$refs.createForm.handleUpdate(row)" v-has-permi="['system:sysPost:update']"><a-icon type="edit"/>修改</a>
          <a-divider type="vertical"/>
          <a @click="handleRemove(row)" v-has-permi="['system:sysPost:remove']"><a-icon type="delete"/>删除</a>
        </template>
      </a-table>
      <!-- 分页 -->
      <a-pagination
        class="ant-table-pagination"
        show-size-changer
        show-quick-jumper
        :current="queryParams.pageNum"
        :total="total"
        :page-size="queryParams.pageSize"
        :showTotal="total => `共 ${total} 条`"
        @showSizeChange="handleSizeChange"
        @change="handleSizeChange"/>
      <!-- 新增/修改 -->
      <create-form ref="createForm" @ok="getList"/>
      <!-- 导入 -->
      <import-form ref="importForm" @ok="getList"/>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import {tableMixin} from '@/store/table-mixin'
import CreateForm from './modules/CreateForm'
import ImportForm from './modules/ImportForm'
import {listSysPost, removeSysPost, removeBatchSysPost, exportSysPost} from '@/api/system/sysPost'

export default {
  components: {
    CreateForm,
    ImportForm
  },
  mixins: [tableMixin],
  data() {
    return {
      sysPostList: [],
      selectedRowKeys: [],
      selectedRows: [],
      advanced: false,
      single: true,
      multiple: true,
      loading: false,
      total: 0,
      queryParams: {
        postName: undefined,
        postKey: undefined,
        isEnable: undefined,
        remark: undefined,
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        {dataIndex: 'postName', title: '岗位名称', align: 'center'},
        {dataIndex: 'postKey', title: '岗位编码', align: 'center'},
        {dataIndex: 'isEnable', title: '是否启用', align: 'center', scopedSlots: {customRender: 'isEnable'}},
        {dataIndex: 'sort', title: '排序', align: 'center'},
        {dataIndex: 'remark', title: '备注', align: 'center'},
        {dataIndex: 'operation', title: '操作', align: 'center', fixed: 'right', width: '120', scopedSlots: {customRender: 'operation'}}
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      listSysPost(this.queryParams).then(res => {
        this.sysPostList = res.data
        this.total = res.total
        this.loading = false
      })
    },
    /** 点击搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 点击重置 */
    handleReset() {
      this.$refs.queryFormRef.resetFields()
      this.handleQuery()
    },
    /** 分页变化 */
    handleSizeChange(current, pageSize) {
      this.queryParams.pageNum = current
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    /** 选择行 */
    handleSelectRow(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 点击删除 */
    handleRemove(row) {
      this.$confirm({
        title: '删除提示',
        content: '确认删除所选中数据?',
        onOk: () => {
          removeSysPost(row.id).then(res => {
            this.$message.success(res.msg)
            this.getList()
          })
        }
      })
    },
    /** 点击批量删除 */
    handleRemoveBatch() {
      this.$confirm({
        title: '批量删除提示',
        content: '确认删除所选中数据?',
        onOk: () => {
          removeBatchSysPost(this.selectedRowKeys).then(res => {
            this.$message.success(res.msg)
            this.getList()
          })
        }
      })
    },
    /** 点击导出 */
    handleExport() {
      this.$confirm({
        title: '导出提示',
        content: '确定导出当前条件下的所有数据吗?',
        onOk: () => {
          exportSysPost(this.queryParams).then(res => {
            this.$message.success(res.msg)
          })
        }
      })
    }
  }
}
</script>
